<template>
  <a-layout class="layout">
    <a-layout-header>
      <LogoHeader />
    </a-layout-header>
    <a-layout-content style="padding: 0 50px">
      <a-breadcrumb>
        <a-breadcrumb-item href="">
          <home-outlined />
        </a-breadcrumb-item>
        <a-breadcrumb-item href="">
          <user-outlined />
          <span>普通师生</span>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          {{ name }}
        </a-breadcrumb-item>
        <a-breadcrumb-item> 欢迎使用本系统！</a-breadcrumb-item>
      </a-breadcrumb>
      <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
        <div>
          <a-tabs>
            <a-tab-pane key="1" tab="借用与归还">
              <BorrowTable />
            </a-tab-pane>
            <a-tab-pane key="2" tab="用户信息管理">
              <UserPanel />
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </a-layout-content>
    <a-layout-footer style="text-align: center">
      CopyLeft 2020 Created with ❤
    </a-layout-footer>
  </a-layout>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from "vue";
import LogoHeader from "@/components/LogoHeader.vue";
import { HomeOutlined, UserOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { myPost, BASE_URL, Response } from "@/utils/request";
import { message } from "ant-design-vue";
import UserPanel from "@/components/UserPanel.vue";
import BorrowTable from "@/components/Stuff/BorrowTable.vue";

export default defineComponent({
  components: {
    LogoHeader: LogoHeader,
    UserPanel: UserPanel,
    BorrowTable: BorrowTable,
    HomeOutlined,
    UserOutlined
  },
  setup() {
    const store = useStore();
    const name = computed(() => {
      const temp = store.getters.name;
      if (temp === "" || !temp) {
        return "未登录";
      } else {
        return temp;
      }
    });

    return {
      name
    };
  }
});
</script>
<style scoped>
.layout {
  height: 100%;
}
</style>
